<template>
  <div>
    <el-table :data="tableParticular" tooltip-effect="dark" border size="medium" @row-click="aloneClick"
              :cell-style="cellStyle">
      <el-table-column prop="sample_info.name" label="样品名称" header-align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="sample_info.sample_type_name" label="样品类别" align="center"
                       :show-overflow-tooltip="true">
        <template #default="{row}">
              <span v-if="row.sample_info && row.sample_info.sample_type_info">
                {{row.sample_info.sample_type_info.same_type_name	}}
              </span>
        </template>
      </el-table-column>
      <el-table-column label="批号" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
          <span v-if="row.sample_info"> {{handlBatch(row.sample_info.batch_info)}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column prop="sample_info.attr" label="规格" align="center" :show-overflow-tooltip="true"/>-->
      <el-table-column prop="destroy_num" label="销毁数量" align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="destroy_time" label="销毁日期" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
           <span v-if="row.destroy_time">{{dateFormat1('yyyy-mm-dd ',row.destroy_time)}}</span>
         </template>
      </el-table-column>
      <el-table-column prop="destroy_no" label="销毁单据编号" align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="project_name" label="所属项目" header-align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="destroy_user_name" label="操作人" align="center" :show-overflow-tooltip="true"/>
      <el-table-column prop="created_at" label="操作时间" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
           <span v-if="row.created_at">{{dateFormat1('yyyy-mm-dd ',row.created_at)}}</span>
         </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'particular',
    props: {
      tableParticular: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },

    //属性是手动定义的所需监听的值
    watch: {},

    computed:{
      handlBatch() {
        return function(val) {
          let str = ''
          if (val) {
            for (let i = 0; i < val.length; i++) {
              str += val[i].sample_batch
              if (i !== val.length - 1) {
                str = str + '、'
              }
            }
          }
          return str
        }
      }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {
      //查看详情
      aloneClick(row, column, event) {
        this.$router.push({
          path: '/sampleManagement/destruction/particular',
          query: { id: row.id }
        })
      },

      //鼠标huover
      cellStyle(data) {
        return 'cursor:pointer;'
      }
    }

  }

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
